<!--编辑个人客户-->
<template>
    <div>
        <el-tabs v-model="activeName2" type="card" >
            <el-tab-pane label="当前用户版本" name="first">
                <el-row>
                    <el-col :span="6"><h2>个人资料</h2></el-col>
                </el-row>
                <el-row>
                    <el-col :span="16">
                        <el-form :inline="true" :model="formInline" class="demo-form-inline">
                            <span style="width:150px;display: inline-block;line-height:40px">姓名</span>
                            <el-form-item label="">
                                <el-input  placeholder="姓名" required></el-input>
                            </el-form-item>
                        </el-form>
                        <el-form :inline="true" :model="formInline" class="demo-form-inline">
                            <span style="width:150px;display: inline-block;line-height:40px">手机号（联系电话）*</span>
                            <el-form-item label="">
                                <el-input  placeholder="手机号" required></el-input>
                            </el-form-item>
                        </el-form>
                        <!--领域-->
                        <el-form :inline="true" :model="formInline" class="demo-form-inline">
                            <span style="width:150px;display: inline-block;line-height:40px">领域</span>
                            <!--循环生成-->

                                <el-form-item v-for="data in array" style="display: inline-block">
                                    <span style="display: inline-block;border:1px solid gray;border-radius: 2px;line-height:20px ">{{data}}</span>
                                </el-form-item>
                            <!--增加按钮-->
                            <el-form-item>
                                <el-button type="info" @click="openDialog('addField')" size="small">增加</el-button>
                            </el-form-item>
                        </el-form>
                    </el-col>
                    <el-col :span="6"><div style="width:100px;height:100px;background: gray">logo</div></el-col>
                </el-row>
                <el-form :inline="true"  class="demo-form-inline">
                    <span style="width:150px;display: inline-block;line-height:40px">角色</span>
                    <el-form-item label="">
                        <template>
                            <el-radio-group v-model="radio2">
                                <el-radio :label="3">专家</el-radio>
                                <el-radio :label="6">地陪</el-radio>
                            </el-radio-group>
                        </template>
                    </el-form-item>
                    <el-form-item label="总体描述">
                        <script id="editor" type="text/plain"></script>
                    </el-form-item>
                </el-form>
                <!--增加领域-->
                <el-dialog title="增加领域" :visible.sync="dialog.addField.open" v-if="dialog.addField.open" :modal="false">
                    <template>
                        <!--领域选项-->
                        <el-checkbox-group v-model="checkList">
                            <el-checkbox label="复选框 A"></el-checkbox>
                            <el-checkbox label="复选框 B"></el-checkbox>
                            <el-checkbox label="复选框 C"></el-checkbox>
                            <el-checkbox label="复选框 d"></el-checkbox>
                            <el-checkbox label="复选框 e"></el-checkbox>
                            <el-checkbox label="复选框 f"></el-checkbox>
                            <el-checkbox label="复选框 g"></el-checkbox>
                            <el-checkbox label="复选框 h"></el-checkbox>
                            <el-checkbox label="复选框 h"></el-checkbox>
                        </el-checkbox-group>
                        <el-button type="primary" size="small" @click="commit('addField')">确定</el-button>
                    </template>
                </el-dialog>
                <!--能力画像-->
                <!--<el-row :gutter="20">-->
                    <!--<el-col :span="20"><div style="height:200px;background:#F7F7F7;">-->
                        <!--这里是文字描述-->
                    <!--</div></el-col>-->
                <!--</el-row>-->
                <h4>关系网</h4>
                <el-form :inline="true" :model="formInline" class="demo-form-inline" style="border-bottom: 1px dashed gray;padding-top: 15px" v-for="data in [1,1,1,1]">
                    <el-form-item label="关系单位">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="任职">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="服务偏好">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                </el-form>
                <el-button type="primary" size="small">新增关系</el-button>
                <el-row>
                    <div style="margin: 10px auto;text-align: center">
                        <el-button type="primary" size="large">确定</el-button>
                    </div>
                </el-row>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script>
    import '@/assets/ueditor/ueditor.config.js'
    import '@/assets/ueditor/ueditor.all.min.js'
    import '@/assets/ueditor/ueditor.parse.min.js'
    import '@/assets/ueditor/lang/zh-cn/zh-cn.js'
    export default {
        data() {
            return {
                array:[],
//                控制弹出层的数据
                dialog:{
                    addField:{
                        open:false
                    }
                },
                checkList: [],
                activeName2: 'first',
                radio2:'3',
                formInline: {
                    user: '',
                    region: ''
                },
                form:{
                    name:''
                },
                baseValue:{
                    money:'5000',
                    faren:'俞兆洪',
                    linkMan:'成莹',
                    address:'浙江省 杭州市 萧山区 民和路 479号1701',
                    Email:'service@tanwin.cn',
                    phoneNum:'057156686688',
                    fax:'057156686688',
                    url:'www.tanwin.cn'
                }
            }
        },
//        显示弹出层的函数
        methods:{
            openDialog(dialog){

                this.dialog[dialog].open = true
            },
//            添加领域并去重
            commit(addField){
                for(var i in this.checkList ){
                    if(this.array.indexOf(this.checkList[i])==-1){
                        this.array.push(this.checkList[i])
                    }

                }
                this.dialog[addField].open = false
            }
        },
//        添加富文本编辑器
        mounted(){
            this.editor = UE.getEditor('editor');
        },
        destroyed() {
            this.editor.destroy();
        },
    }
</script>

<style>
    ul li{
        list-style: none;
        margin-top: 20px;
    }
    .listSty{
        display:inline-block;
        width: 150px
    }
    .mainListSty{
        display:inline-block;
        width: 150px;
    }
    .able:after{
        content: "√";
        color: #6ce26c;
    }
</style>